<template>
	<view class="tabs_rankList">
		<view class="tabs_rankList_box">
			<scroll-view class="tabs_rankList_box_scroll" scroll-x="true" :scroll-left="rankOffsetLeft">
				<view class="tabs_rankList_box_scroll_child" v-for="(item,index) in rankList">
					<view :class="{'tabs_rankList_box_scroll_child_meun':true,active:item.active}"
						@click.stop="handleMainWorks(item,index)">
						{{item.title}}
					</view>
				</view>
			</scroll-view>
			<image src="/static/image/serachIcon.png" mode="" @click="handleSearch"></image>
		</view>
		<view class="hbh_swiper">
			<swiper class="swiper" :current="current" circular :duration="duration" @change="swiperChange">
				<swiper-item v-for="(parent,pIndex) in rankList" :key="pIndex">
					<view class="swiper-item">
						<view class="hbh_swiper_left">
							<text v-for="(item,index) in parent.manList" :key="index"
								:class="{active:item.flag}"
								@click="handleMan(item,pIndex,index)">{{item.name}}</text>
						</view>
						<view class="hbh_swiper_right">
							<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"
								@scroll="scroll">
								<view v-for="(item,index) in parent.manList" :key="index"
									:id="'hbh'+index" class="scroll-view-item">
									<view class="scroll-view-item-nav">
										{{item.name}}
									</view>
									<view class="scroll-view-item-main">
										<view class="scroll-view-item-child" @click="handleToSearch(child)"
											v-for="(child,cIndex) in item.child">
											<text>{{child.classify_name}}</text>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</swiper-item>
			</swiper>


		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex';
	import {
		app_getClassifys
	} from "@/api/classifys/index.js"
	export default {
		data() {
			return {
				rankOffsetLeft: 0,
				rankList: [{
					title: "男生",
					active: true,
					manList: [{
						name: "分类",
						flag: true,
						offTop: 0,
						child: []
					}]
				}, {
					title: "女生",
					active: false,
					manList: [{
						name: "分类",
						flag: true,
						offTop: 0,
						child: []
					}]
				}],
				left: '80rpx',
				duration: 500,
				current: 0,
				scrollIntoView: "hbh0",
				scrollTop: 0,
				tapFlag: false,
				scrollAnimation: 2000,
				scrollY: true,
				scrollHeight: 0,
				old: {
					scrollTop: 0
				},
				isLeftClick: false,
				manList: [{
					name: "分类",
					flag: true,
					offTop: 0,
					child: []
				}]
			};
		},
		created() {
			this.getClassifys()
		},
		mounted() {
			this.$nextTick(() => {
				const views = uni.createSelectorQuery().in(this)
				views
					.selectAll(".scroll-view-item")
					.boundingClientRect(data => {
						if (data.length === 0) return
						const map = new Map();
						const newArr = data.filter(v => !map.has(v.id) && map
							.set(v.id, 1));
						this.rankList.forEach((parent, pIndex) => {
							parent.manList.forEach((item, index) => {
								let sum = 0
								newArr.forEach((child, cIndex) => {
									if (index >=
										cIndex) {
										// console.log(index,cIndex)
										sum += child
											.height
									}
								})
								item.offTop = sum
								console.log(item.offTop)

							})
						})

					})
					.exec()

			})
		},
		methods: {
			handleToSearch(child){
				uni.navigateTo({
					url:`/pages/searchNovel/searchNovel?classify_name=${child.classify_name}&classify_id=${child.classify_id}`
				})
			},
			getClassifys() {
				app_getClassifys({
					sex: '1'
				}).then((res) => {
					this.rankList[0].manList[0].child = res.data
					
				}).catch((err) => {

				})
				app_getClassifys({
					sex: '0'
				}).then((res) => {
					this.rankList[1].manList[0].child = res.data
				}).catch((err) => {

				})
			},
			handleSearch() {
				uni.navigateTo({
					url: "/pages/searchNovel/searchNovel"
				})
			},
			//实时计算滚动到哪个菜单栏
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
				let index = this.manList.findIndex(item => e.detail.scrollTop < item.offTop)
				this.manList.forEach((child, index) => {
					child.flag = false
				})
				this.manList[index].flag = true
			},
			handleMan(item,pIndex,index) {
				this.rankList[pIndex].manList.forEach((child, index) => {
					child.flag = false
				})
				item.flag = true
				this.scrollTop = this.old.scrollTop
				this.$nextTick(() => {
					this.scrollTop = index == 0 ? 0 : this.rankList[pIndex].manList[index - 1].offTop
				});

			},
			handleMainWorks(item, index) {
				this.rankList.forEach((item, index) => {
					item.active = false
				})
				item.active = true
				this.current = index
			},
			swiperChange(e) {
				this.current = e.detail.current
				this.rankList.map(item => item.active = false)
				let obj = this.rankList[e.detail.current]
				obj.active = true
				this.$set(this.rankList, e.detail.current, obj)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs_rankList {
		padding-top: calc(var(--status-bar-height) + 50rpx);
		box-sizing: border-box;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: linear-gradient(180deg, #FFE8C2 0%, #f5f5f5 100%);

		&_box {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			position: relative;

			>image {
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				top: calc(50% - 25rpx);
				right: 30rpx;
			}

			&_scroll {
				white-space: nowrap;
				width: 100%;
				height: 80rpx;
				display: flex;
				flex-direction: row;

				&_child {
					padding: 10rpx;
					height: 100%;
					display: inline-block;
					margin-right: 20rpx;

					&_meun {
						color: #bebfc1;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 34rpx;
						border-radius: 10rpx;
						transition: all 1s ease;
					}

					.active {
						font-size: 40rpx;
						font-weight: bold;
						color: #000;
						transition: all 1s ease;
					}

				}

				&_child:last-child {
					margin-right: 0rpx;
				}
			}
		}

		.hbh_swiper {
			height: calc(100% - 100rpx);
			padding-top: 30rpx;
			box-sizing: border-box;

			.swiper {
				width: 100%;
				height: 100%;

				.swiper-item {
					height: 100%;
					display: flex;

					.hbh_swiper_left {
						width: 200rpx;
						height: 100%;
						display: flex;
						flex-direction: column;

						text {
							height: 90rpx;
							line-height: 90rpx;
							text-align: center;
						}

						.active {
							color: orange;
						}
					}

					.hbh_swiper_right {
						width: calc(100% - 200rpx);
						height: 100%;
						background-color: #fff;
						overflow: hidden;
						padding: 20rpx;
						box-sizing: border-box;
						border-top-left-radius: 20rpx;
						border-top-right-radius: 20rpx;

						.scroll-Y {
							height: 100%;

							.scroll-view-item {

								// margin-bottom: 10px;
								// background-color: red;
								.scroll-view-item-nav {
									height: 50rpx;
									line-height: 50rpx;
									color: #ccc;
								}

								.scroll-view-item-main {
									display: flex;
									flex-wrap: wrap;
									// justify-content: space-between;

									.scroll-view-item-child {
										width: 33.3%;
										height: 100rpx;
										display: flex;
										justify-content: center;
										align-items: center;
										margin-bottom: 30rpx;

										text {
											width: 150rpx;
											text-align: center;
											height: 60rpx;
											line-height: 60rpx;
											border-radius: 5rpx;
											background-color: #f1f1f1;
										}
									}
								}

							}
						}

					}
				}
			}


		}
	}
</style>